<template>
	<view class="purchase-container">
		<view class="purchase-tabs">
			<u-subsection :list="list" mode="subsection" @change="sectionChange" :current="current" :inactiveColor=color
				:customStyle="subCustom"></u-subsection>
			<view class="count">
				<view class="item" v-for="(item,index) in countList" :key="index" :style="item.style">
					<text>
						{{item.label}}：
					</text>
					<text class="content">{{item.value}}</text>
				</view>
			</view>
		</view>
		<view class="purchase-button" style="margin: 20rpx 0;;">
			<u-button class="button" :color="color" @click="gotoAdd">添加申购配件</u-button>
		</view>
		<view class="purchase-list">
			<u-list :height="listHeight" @scrolltolower="init" @refresherrefresh="refresherrefresh"
				:refresherEnabled="true" :refresher-triggered="isPull" refresher-background="#F2F4F6"
				refresher-threshold="50">
				<template v-if="listData.length===0">
					<u-empty text="暂时没有数据" mode="list"></u-empty>
				</template>
				<template v-else>
					<view class="items" v-for="item in listData" :key="item.id">
						<view class="item-order" @tap="gotoDetail(item.id)">
							<text class="custom">客户订单：</text>{{item.customerphone}}--{{item.address}}
						</view>
						<view class="item-parts_list " v-for="list1 in item.parts_list " :key="list1.id">
							<view class="list-title">
								{{list1.content}} <text class="custom" style="margin:0 10rpx">x</text>{{list1.number}}
							</view>
							<view class="list-price custom">
								￥{{list1.price}}
							</view>
						</view>
						<view class="item-parts_list" style="align-items: end;">
							<view class="custom">
								师傅：{{item.worker_name}}
							</view>
							<view class="list-price">
								<text class="custom">总价￥</text> <text class="price">{{item.priceSum }}</text>
							</view>
						</view>
						<view class="item-parts_list" style="justify-content: normal;">
							<view class="custom">
								状态：
							</view>
							<view class="status-list">
								<view class="item" v-for="(list2,list2Index) in item.statusList" :key="list2Index">
									<view class="status-list-name"> <text
											style="color:red">{{list2.review_username}}</text>{{list2.status_text}}
									</view>
									<view class="status-list-time">{{list2.date}}</view>
								</view>
							</view>
						</view>
						<template v-if="item.imagesList.length>0">
							<view class="imageList">
								<nt-cdn-image @imageTap="previewImage(item.imagesList,index)" class="image"
									v-for="(image,index) in item.imagesList" :src="image" :key="index"></nt-cdn-image>
							</view>
						</template>
					</view>
				</template>
			</u-list>
		</view>
	</view>
</template>

<script>
	import {
		getPartsPurchaseSelect,
		getCountFuntype
	} from '@/api'

	import {
		appConfig
	} from "@/config"
	export default {
		data() {
			return {
				list: ['待审核报销', '已审核报销', '已驳回'],
				current: 0,
				subCustom: {
					height: "76rpx"
				},
				color: '#007aff',
				listData: [],
				countList: [],
				isPull: true,
				params: {
					type: 1,
					page: 1,
					limit: 10
				},
				listHeight: 100,
				nextRequest: true
			}
		},
		async mounted() {
			const that = this
			that.setHeight()
			await that.getCount()
			await that.getList()
			uni.$on('getPurchaseList', () => {
				that.sectionChange(that.current)
			})
		},
		methods: {
			// 获取统计
			async getCount() {
				const {
					code,
					data: countList
				} = await getCountFuntype()
				if (code === 1) {
					this.countList = countList
				}
			},
			gotoDetail(id) {
				this.nav(`/subpackage/order/pages/_id?id=${id}`)
			},
			gotoAdd() {
				this.nav('/subpackage/storehouse/pages/worker/subscribe/add')
			},
			previewImage(url, current) {
				let urls = url.map(o => (o = appConfig.imgCDN + o.replace(/\\/g, "/")))
				uni.previewImage({
					urls,
					current
				})
			},
			setHeight() {
				const that = this
				uni.getSystemInfo({
					success: ({
						windowHeight
					}) => {
						setTimeout(async () => {
							await that.$nextTick()
							uni.createSelectorQuery().selectAll('.purchase-list')
								.boundingClientRect(
									res => {
										// 获取列表定位
										that.listHeight = windowHeight - res[0].top
									}).exec()
						})

					}
				})
			},
			async getList(time) {
				const that = this
				try {
					if (!that.nextRequest) return
					const {
						code,
						data
					} = await getPartsPurchaseSelect(that.params)
					that.isPull = false
					if (code == 1 && this.time == time) {
						that.params.page = ++that.params.page
						that.listData = [...that.listData, ...data.data]
						that.listData.length >= data.total ? that.nextRequest = false : null
					}

				} catch (e) {
					that.isPull = false
					//TODO handle the exception
				}
			},
			sectionChange(index) {
				this.time = new Date().getTime()
				this.current = index;
				this.params.page = 1
				this.params.type = ++index
				this.nextRequest = true
				this.listData = []
				this.getList(this.time)
			},
			// 下拉刷新
			refresherrefresh(e) {
				this.time = new Date().getTime()
				this.isPull = true
				this.params.page = 1

				this.listData = []
				this.nextRequest = true
				this.getList(this.time)
			},
			init() {
				this.time = new Date().getTime()
				this.getList(this.time)
			}
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .u-subsection__bar {
		background-color: #007aff !important;
	}

	.purchase {

		&-tabs,
		&-button {
			padding: 32rpx;
			background-color: #fff;

			.button {
				width: 50%
			}

		}

	}

	.custom {
		color: #bababa;
	}

	.items {
		font-size: 30rpx;
		padding: 30rpx;
		background-color: #fff;
		margin: 20rpx 0;

		.item {
			&-order {
				color: #007aff;
			}

			&-parts_list {
				display: flex;
				justify-content: space-between;
				margin: 10rpx 0;

				.list-price {
					.price {
						color: red;
						font-size: 42rpx;
					}
				}

				.status-list {
					flex: 1;

					.item {
						display: flex;
						justify-content: space-between;
					}
				}
			}

		}

		.imageList {
			display: flex;
			flex-wrap: wrap;

			.image {
				width: 150rpx !important;
				height: 150rpx !important;

				&:nth-child(n+1) {
					margin-left: 10rpx;
				}
			}

		}

	}

	.count {
		display: flex;
		margin-top: 32rpx;
		font-size: 12px;
		justify-content: center;
		align-items: center;

		.item {
			.content {
				color: #ff1313
			}
		}
	}
</style>